<template>
  <div>
    <!--页名-->
    <el-row>
      <label style="font-size: 32px;font-family: Arial;float:left;margin-bottom: 10px">KPI/PI</label>
    </el-row>

    <!--下拉框-->


    <el-row>
      <div style="margin-bottom:50px">
      <el-col :span="16">
        <el-row :gutter="5">
          <!--Department下拉框-->
          <el-col :span="4">
            <el-select v-model="areaValue" placeholder="placeholder">
              <el-option
                v-for="item in areaOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <!--时间下拉框-->
          <el-col :span="4">
            <el-select v-model="timeIntervalValue" @change="timeIntervalValueChange" placeholder="placeholder">
              <el-option
                v-for="item in timeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <!--Shift下拉框-->
          <el-col :span="4">
            <el-select v-model="shiftValue" placeholder="placeholder">
              <el-option
                v-for="item in shiftOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <!--Brand/SKU下拉框-->
          <el-col :span="5">
            <el-select v-model="brandskuValue" placeholder="placeholder">
              <el-option
                v-for="item in brandskuOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <!--timePicker-->
          <el-col :span="4">
            <component :is="timePicker"/>
          </el-col>
        </el-row>
      </el-col>
      </div>
    </el-row>

    <el-row>
      <EchartsTree @changePage="toSecond"></EchartsTree>
    </el-row>
  </div>
</template>

<script>
  import EchartsTree from "@/pages/contents/tracking/KPIPIPages/subComponents/EchartsTree";

  export default {
    name: "KPIPIHome",
    components:{
      EchartsTree,
      // 懒加载
      DayTimePicker:resolve => {require(['@/pages/contents/tracking/KPIPIPages/subComponents/DayTimePicker'],resolve)},
      WeekTimePicker:resolve => {require(['@/pages/contents/tracking/KPIPIPages/subComponents/WeekTimePicker'],resolve)},
      MonthTimePicker:resolve => {require(['@/pages/contents/tracking/KPIPIPages/subComponents/MonthTimePicker'],resolve)},
      YearTimePicker:resolve => {require(['@/pages/contents/tracking/KPIPIPages/subComponents/YearTimePicker'],resolve)},
    },
    methods: {
      // 日期类型选项变更的回调函数
      // 一定要用this关键字
      timeIntervalValueChange(value) {
        if("YTD" == value)
          this.timePicker = "YearTimePicker";
        if("MTD" == value)
          this.timePicker = "MonthTimePicker";
        if("Weekly" == value)
          this.timePicker = "WeekTimePicker";
        if("Daily" == value)
          this.timePicker = "DayTimePicker";
      },
      toSecond(value) {
        //alert(value);
        this.$router.push('/kpipi_second');
      }
    },
    data() {
      return {
        timePicker:'DayTimePicker',



        areaValue: 'Area',
        timeIntervalValue: 'Time',
        shiftValue: 'Shift',
        brandskuValue: 'Brand/SKU',

        areaOption: [{
          value: 'Heal',
          label: 'Heal'
        }, {
          value: 'Electricity',
          label: 'Electricity'
        },{
          value: 'Water',
          label: 'Water'
        },{
          value: 'CO2',
          label: 'CO2'
        },{
          value: 'Air',
          label: 'Air'
        }],
        timeOption: [{
          value: 'YTD',
          label: 'YTD'
        }, {
          value: 'MTD',
          label: 'MTD'
        }, {
          value: 'Weekly',
          label: 'Weekly'
        }, {
          value: 'Daily',
          label: 'Daily'
        }],
        shiftOption: [{
          value: 'shift1',
          label: 'shift1'
        }, {
          value: 'shift2',
          label: 'shift2'
        },],

        brandskuOption: [{
        value: 'brand1',
        label: 'brand1'
      }, {
        value: 'brand2',
        label: 'brand2'
      },],

      };
    },
  }
</script>

<style scoped>

</style>
